<template>
  <div class="page_productdetail">
      <div class="detail_header">
          <div class="earnings" style="font-weight:600">{{detail.yearIncome}}%</div>
          <div class="earnings_text">预期年化</div>
          <div class="earnings_detail">
            <div class="item">
              <div class="first_title"><span style="font-weight:600">{{detail.interestLimit}}</span><span class="small">天</span></div>
              <div  class="second_title"> <span>投资期限</span></div>  
              </div>
            <div class="item item_center">
              <div class="first_title"><span style="font-weight:600">{{detail.partInvestAmount}}</span> <span class="small">元</span></div>
              <div class="second_title"> <span>起购金额</span></div>  
            </div>
            <div class="item">
              <div class="first_title"><span style="font-weight:600">{{detail.investTotalAmount}}</span><span class="small">万</span></div>
              <div class="second_title"> <span>总金额</span></div>  
            </div>
          </div>
      </div>
      <div class="progress">
          <div class="progress_shadow"  :style="{ width: detail.progress+'%'}">
          </div>
          <div class="progress_text" :style="{ left: detail.progress+'%'}" v-show="detail.progress<90">
              {{detail.progress}}%
          </div>
           <div class="progress_text" :style="{ left: '91%'}" v-show="detail.progress>90">
              {{detail.progress}}%
          </div>
      </div>

      <div class="active_tag" v-show="detail.activityslength!==0">
        <div>
            <span class="active_number">{{detail.activityslength}}个活动</span>
          <span class="active_name" v-for="item in detail.activitys">{{item.activityTitle}}</span>
        </div>
         <div>
          <img src="../public/imgs/icon_right.png" alt="">
         </div>
        </div>  

   <div class="forecast_earnings">
     <div class="forecast_title">
       <div class="black">预估收益</div>
       <div class="gray">到期还本付息</div>
     </div>
     <div class="gray">本产品投资 <span class="red">{{rangeValue}}</span>  元，{{detail.interestLimit}}天可赚取 <span class="red">{{money}}</span>  元</div>
     <div class="range">
       <div class="change_range">
            <div class="item" v-for="i in 7"></div>
       </div>
       
       <mt-range  v-model="rangeValue"  :step="1" :bar-height="3"
        :min="detail.partInvestAmount"
        :max="50000">
         </mt-range>
      </div>
   </div>

   <div class="investment_process">
      <div class="investment_title">理财流程</div>
      <div class="investment_second">
        <div>
          <span>开始</span>
          <span class="investment_center_tag">满额次日计息</span>
        </div>
        <div>到期自动到账</div>
      </div>
      <div class="investment_there">
          <div class="left">匹配优质债权</div>
          <div class="right">持续产生收益</div>
      </div>
   </div>
   <div class="investment_list">
       <div>投资列表</div>
       <div style="color:#666">已投资 <span style="color:#5261f7">{{detail.totalInvestCount}}</span>  笔</div>
   </div>

   <div class="investment_table_nav">
     <div class="item" @click="showproduct(1,detail.safeDetailUrl)">
       <div class="text " :class="{'active_text':selected==1}">产品简介</div>
       <div class="active" v-show="selected==1"></div>
     </div>
     <div class="item" @click="showproduct(2,detail.detailUrl)">
        <div class="text  " :class="{'active_text':selected==2}">项目详情</div>
       <div class="active" v-show="selected==2"></div>
       </div>
      <div class="item" @click="showproduct(3,detail.riskDetailUrl)">
        <div class="text " :class="{'active_text':selected==3}">风险揭示</div>
       <div class="active" v-show="selected==3"></div>
       </div>
   </div>
   <div class="investment_table_content"  v-html="content">
    
   </div>

   <div class="investment_buy">
     <div class="left" @click="Navite('jumpToCustomerService')"><img src="../public/imgs//icon_task.png" alt="">在线客服</div>
     <div class="right"><span v-show="detail.sell==0">立即投资</span><span v-show="detail.sell!==0">已售罄</span> </div>
   </div>
  </div>
</template>
<script>
import { Range } from "mint-ui";
export default {
  name: "",
  data() {
    return {
      rangeValue:0,
      detail:[],
      content:"",
      selected:1,
      money:"",
    };
  },
  created(){
   this.$http.get(this.Interface.getProductDetail,{params:{productId:this.$route.query.productid,sessionid:""}}).then(res=>{
     if(res.data.success){
       if(!res.data.data.activitys){
         res.data.data.activitys=[];
          res.data.data.activityslength=0;
       }else{
          res.data.data.activityslength=res.data.data.activitys.length;
       }
       this.detail=res.data.data;
       console.log(this.detail)
       this.rangeValue=this.detail.partInvestAmount
       this.showproduct(1,this.detail.safeDetailUrl);
     }
   })
  },
  computed: {},
  mounted() {
  
  },
watch: {
    rangeValue(newValue, oldValue) {
      this.money=0;
      this.money=(newValue*(this.detail.yearIncome/365/100)*this.detail.interestLimit).toFixed(2)
    }
},
  methods: {
    showproduct(type,url){
      this.selected=type;
      this.$http.get(url).then(res=>{
       this.content=res.data
     })
    },

      Navite(url){
          this.Uitis.JumpNavite(url);
      }
  }
};
</script>
<style lang="less">
body {
  background: #f4f4f4;
}
.page_productdetail {
  .mt-range-progress {
    background: #f2616d;
    height: 4px;;
  }

  .detail_header {
    background: url(../public/imgs/detail_bg.png) no-repeat;
    width: 100%;
    background-size: contain;
    height: 345px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    .earnings {
      font-size: 56px;
      color: #fff;
      margin-top: 40px;
    }
    .earnings_text {
      font-size: 22px;
      color: #999;
      margin-bottom: 80px;
    }
    .earnings_detail {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 80px;
      .item {
        text-align: center;
        width: 240px;
        border-right: 1px solid #5d5f67;
        height: 85px;
        .first_title {
          font-size: 30px;
          color: #fff;
          .small {
            color: #999;
            margin-left: 8px;
          }
        }
        .second_title {
          font-size: 22px;
          color: #999;
          margin-top: 5px;
        }
      }
      .item_center {
        flex: 1;
      }
    }
  }

  .progress {
    width: 100%;
    height: 8px;
    background: #999;
    position: relative;
    border-top: 1px solid #bdbdbd;
    .progress_shadow {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #fce3b1;
      transition: width 2s;
    }
    .progress_text {
      position: absolute;
      top: -40px;
      background: #e5b673;
      color: #333;
      padding: 0px;
      border-radius: 5px;
      transition: left 2s;
      color: #fff;
    }
  }
  .active_tag {
    background: #fff;
    padding: 25px 40px;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    img {
      width: 12px;
      height: 26px;
    }
    .active_number {
      color: #f2616d;
      display: inline-block;
      border: 1Px solid #f2616d;
      border-radius: 5px;
      padding: 0px 5px;
      height: 37px;
      margin-right: 34px;
      line-height: 41px;
    }
    .active_name {
      color: #f2616d;
      margin-right: 34px;
    }
  }
  .forecast_earnings {
    background: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    .black {
      font-size: 28px;
      color: #333;
    }
    .gray {
      font-size: 26px;
      color: #999;
    }
    .red {
      color: #f2616d;
    }
    .forecast_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 35px;
    }
    .range {
      margin-top: 30px;
       position: relative;
      .change_range{
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 100%;
        height: 10px;
        padding: 0 55px;
        top:25px;
        .item{
            width: 3px;
            height: 10px;
            background: #fff;
            z-index: 888;
        }
      }
    }
  }
  .investment_process {
    border-bottom: 1px solid #d9d9d9;
    background: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    .investment_title {
      font-size: 28px;
      color: #333;
      margin-bottom: 35px;
    }
    .investment_second {
      padding: 0 15px 0 15px;
      display: flex;
      border-left: 1px solid #e5b673;
      border-right: 1px solid #cccccc;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 24px;
      color: #666;
      .investment_center_tag {
        display: inline-block;
        border-left: 1px solid #cccccc;
        margin-left: 95px;
        padding-left: 15px;
        padding-bottom: 25px;
      }
    }
    .investment_there {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      color: #fff;
      font-size: 20px;
      text-align: center;

      .left {
        border-radius: 5px;
        background: #eac58f;
        padding: 3px 0px;
        width: 150px;
      }
      .right {
        border-radius: 5px;
        background: #cccccc;
        padding: 3px 0px;
        width: 507px;
      }
    }
  }
  .investment_list {
    background: #fff;
    padding: 40px;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    color: #333;
    margin-bottom: 15px;
  }

  .investment_table_nav{
    color: #999;
    font-size: 28px;
    background: #fff;
    padding: 40px 60px;;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item{
       position: relative;
       width: 120px;
       height: 35px;
       text-align: center;
       .text{
         background: transparent;
          position: absolute;
         width: 100%;
         top: 0;
         left: 0;
         z-index: 6;
       }
       .active{
         position: absolute;
         width: 100%;
         bottom: 8px;
         left: 0;
         background: #f2dab9;
         height: 12px;

       }
       .active_text{
         color: #333;
         }
    }

  }
  .investment_table_content{
    padding-bottom:150px;
    min-height: 150px;
  }
  .investment_buy{
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    z-index: 999;
    .left{
     padding: 30px 0px;
     background: #fff;
     text-align: center;
     font-size: 28px;
     color: #666;
     width: 290px;
     img{
       width: 34px;
       height: 28px;
       margin-right: 10px;
     }
    }
    .right{
      padding: 30px 0px;
      background: #5261f7;
      color: #fff;
      font-size: 38px;
      width: 100%;
    }
  }
}
</style>
